<template>
  <div class="pyqbox">
        <div class="" style="height:100%;overflow-y: auto;overflow-x:hidden;">
            <div  style="width:100%;height:200px;position: relative;">
                <img class="bgimgimg" style="-webkit-animation:kenburns-top 5s ease-out both;animation:kenburns-top 5s ease-out both" src="https://img2.baidu.com/it/u=1840828656,940167964&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=625" width="100%" height="100%" alt="">
                <img style="position: absolute;right:20px;bottom:-25px;width:70px;height:70px;border-radius:5px;" :src="friendData.avatar?friendData.avatar:srcLogo" alt="">
                <span style="position: absolute;right:100px;bottom:10px;color:#fff;font-size:18px;font-weight:1000;">{{ friendData.nick }}({{total}}条)</span>
            </div>
            <div style="height: 800px;margin-top: 40px;" v-if="list">

                <div v-for="(item,index) in list" :key="index" style="min-height: 40px;position: relative;">
                    <div style="display: flex;">
                        <img :src="friendData.avatar?friendData.avatar:srcLogo" width="50" height="50" style="border-radius: 5px;" alt="">
                        <div style="margin-left: 10px;font-size: 18px;color:#2c89d5;">{{ item.REMARK?item.REMARK:item.NICK }}</div>
                    </div>
                    <!-- 文本 -->
                    <div v-if="item.weibo_msg.content" style="width: 80%;min-height:20px;position: relative;left: 60px;top: -20px;font-size: 17px;color: #303030;letter-spacing: 2px;">{{item.weibo_msg.content}}
                    </div>
                    <div v-if="item.weibo_msg.media && item.weibo_msg.type ==1" style="min-height: 100px;padding-left: 55px;display: flex;flex-wrap: wrap;padding-right: 22px;margin-bottom: 10px;">
                        <div style="margin-left: 9px;height:100px;margin-top:5px;" class="demo-image__preview" v-for="(i,j) in item.weibo_msg.media" :key="j">
                            <el-image 
                            v-if="i && i.thumburl"
                            style="width:100px; height: 100px"
                            :src="i.thumburl" 
                            @click="showGallery(item.weibo_msg.media, i)"
                            :preview-src-list="srcList">
                            </el-image>
                        </div>
                    </div>
                    <!-- 视频 -->
                    <div v-if="item.weibo_msg.type == 15" style="width:80%;min-height: 200px;padding-left: 60px;padding-right:20px;display: flex;flex-wrap: wrap;padding-right: 22px;margin-bottom: 10px;">
                        <video 
                            :src="(item.weibo_msg.media && item.weibo_msg.media[0] && item.weibo_msg.media[0].thumburl) || item.weibo_msg.link"
                            width="315" 
                            height="500" 
                            controls 
                            style="object-fit: cover;">
                        </video>
                    </div>
                    <!-- 小程序 -->
                    <div v-if="item.weibo_msg.type == 3" @click="openLink(item.weibo_msg.link)" style="min-height: 100px;cursor: pointer;padding-left: 45px;display: flex;flex-wrap: wrap;padding-right: 22px;margin-bottom: 10px;width:100%;">
                        <div style="display: flex;align-items: center;background:#f5f5f5;border-radius: 5px;width:100%">
                            <img src="../../../assets/xiaochengxv.png" style="margin-right:10px;" width="50" height="50" alt="">
                            <div class="wxAppText">{{item.weibo_msg.title}}</div>
                        </div>
                        <!-- <div style="">{{item.weibo_msg.title}}</div> -->
                    </div>

                    <div style="position: relative;margin-top: 5px;font-size: 15px;color: #a3a3a3;left: 60px;margin-bottom: 10px;">{{FormData(item.send_time)}}</div>

                    <div v-if="item.weibo_msg.comment.length>0" style="position: relative;left:60px;min-height: 40px;background-color: #f3f3f3;width: 80%;border-radius: 5px;margin-bottom: 10px;padding: 8px;">
                        
                        <!-- <div style="font-size: 17px;margin-bottom: 10px;">
                            <img src="../../../assets/dianzan.png" width="20" height="20" alt="">
                            <span style="color:#2c89d5;"> 云遮夏靥、张浩、李林波、云遮夏靥、张浩、李林波</span>
                        </div> -->
                        
                        <div v-for="(pdata,pindex) in item.weibo_msg.comment" :key="pindex" style="font-size: 17px;margin-top: 10px;">
                            <span v-if="pdata.type==2">
                                <span style="color:#2c89d5;">{{pdata.fromwxid}}:</span><span style="font-size: 17px;color: #303030;">{{pdata.content}}</span>
                            </span>
                            </div>
                        <!-- <div style="font-size: 17px;margin-top: 10px;"><span style="color:#2c89d5;">李林波:</span><span style="font-size: 17px;color: #303030">吧啦吧啦吧啦吧吧啦吧啦吧啦吧吧啦吧啦吧啦吧吧啦吧啦吧啦吧</span></div>
                        <div style="font-size: 17px;margin-top: 10px;"><span style="color:#2c89d5;">云遮夏靥</span> 回复 <span style="color:#2c89d5;">李林波 :</span><span style="font-size: 17px;color: #303030">你疯了？</span></div> -->
                    </div>
                </div>
                <div style="display: flex; justify-content: center;">
                    <el-button type="text" @click="loadMore">加载更多</el-button>
                </div>
            </div>
        </div>
        <el-image-viewer ref="imageGallery" :src="srcList" :z-index="2000000000000000" />
  </div>
</template>

<script>
import { getWxFriendList } from '@/api/weChat/weChat_api'
import { parseTime } from "@/utils/index";
export default {
    name:'circleFriends2',
    props:['sendData'],
    data(){
        return{
            list:[],
            limit:20,
            offset:1,
            total:0,
            friendData:{
                avatar:require('../../../assets/images/wechatFriend.png'),
                nick:'朋友圈',
                id:'123'
            },
            srcLogo:require('../../../assets/images/wechatFriend.png'),
            onlyUrl:'https://img1.baidu.com/it/u=1894489640,257262556&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800',
            srcList:[
                'https://img1.baidu.com/it/u=1894489640,257262556&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800',
                'https://img2.baidu.com/it/u=2363900005,280886924&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800',
                'https://img0.baidu.com/it/u=1598850878,59814561&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800',
                'https://img1.baidu.com/it/u=1250510633,1329722166&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1083',
                'https://img1.baidu.com/it/u=1894489640,257262556&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800',
                'https://img2.baidu.com/it/u=2363900005,280886924&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800',
                'https://img0.baidu.com/it/u=1598850878,59814561&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800',
                'https://img1.baidu.com/it/u=1250510633,1329722166&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1083',
                'https://img2.baidu.com/it/u=600665927,4067896986&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500'
            ],
        }
    },
      watch: {
    "$store.state.account.vpnHistory2": function () {
        this.init();
    },
  },
    created(){
        this.init();
    },
    methods:{
        showGallery(list,i){
        // 获取当前图片在 srcList 中的索引
        let arr = [];
        for (let index = 0; index < list.length; index++) {
            const element = list[index];
            arr.push(element.url)
        }
        this.srcList = arr;
        const currentIndex = this.srcList.indexOf(i);
        // 调用 Element UI 的图片预览方法
        this.$refs.imageGallery.show(currentIndex);
        },
        loadMore(){
            this.offset ++;
            this.init();
        },
        openLink(url){
            window.open(url,'_blank');
        },
        FormData(date){
            return parseTime(date)
        },
        init(){
            let data = {
                proof_num:this.sendData.proof_num,
                account_id:this.sendData.account_id,
                limit:this.limit,
                offset:this.offset
            }
            getWxFriendList(data).then(res=>{
                console.log('====================',res.data)
                if(res.data.length > 0){
                    // this.list = res.data;
                    this.list.push(...res.data);
                    this.total = res.data[0].cnt;
                }else{
                    this.$message({
                        message: "没有更多数据了",
                        type: "info",
                    });
                }
            }).catch(err=>{

            })
        }
    }
}
</script>

<style scoped>
.pyqbox{
    height: 90%;
    padding:0 10px;
    
}

.openBox{
    width: 1px;
    height: 100px;
    cursor: pointer;
}
.wxAppText{
    text-overflow: -o-ellipsis-lastline;
	overflow: hidden;
	text-overflow: ellipsis;	
	display: -webkit-box;	
	-webkit-line-clamp: 2;	
	line-clamp: 2;		
	-webkit-box-orient: vertical;
    font-size: 16px;
}
    .topWxFBox{
        background: url('https://img2.baidu.com/it/u=1840828656,940167964&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=625');
        background-size: 100% 100%;
        background: cover;
    }

    .topWxFBox{-webkit-animation:kenburns-top 5s ease-out both;animation:kenburns-top 5s ease-out both}

    @-webkit-keyframes kenburns-top{0%{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0);-webkit-transform-origin:50% 16%;transform-origin:50% 16%}100%{-webkit-transform:scale(1.25) translateY(-15px);transform:scale(1.25) translateY(-15px);-webkit-transform-origin:top;transform-origin:top}}@keyframes kenburns-top{0%{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0);-webkit-transform-origin:50% 16%;transform-origin:50% 16%}100%{-webkit-transform:scale(1.25) translateY(-15px);transform:scale(1.25) translateY(-15px);-webkit-transform-origin:top;transform-origin:top}}
    .shouCang:hover{
        font-weight: bold;
        color: #38c5f9;
    }
    ::-webkit-scrollbar {
        width: 4px;
        height: 10px;
    }
    ::-webkit-scrollbar-button {
        background-color: rgb(255, 255, 255);
    }

    ::-webkit-scrollbar-track-piece {
        background: rgb(230, 230, 230);
    }

    ::-webkit-scrollbar-thumb {
        background: rgb(194, 194, 196);
        border-radius: 4px;
    }
    .pengyouquan:hover{
        color:#38c5f9;
        font-weight: 1000;
    }
    .pengyouquan > img {
        transform: rotate(0deg); /* 默认状态下不旋转 */
        transition: transform 0.3s ease; /* 添加默认的过渡效果 */
    }
.pengyouquan:hover>img{
    width: 20px;
    height: 20px;
    transform:rotate(180deg);
}
</style>